﻿<!DOCTYPE html>
<html ng-app="app">

<head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-resource.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/angular-sanitize.min.js"></script>
    <script src="Scripts/jquery-2.1.4.min.js"></script>

    <script src="app.js"></script>
    <script src="data.js"></script>
    <title>Angular模块</title>

    <style>
        .select-page {
            width: 50px;
            text-align: center;
        }

        .pagination li a input {
            padding: 0;
            margin: -5px 0;
        }

        .pagination li a {
            color: #777;
        }

        .pagination li span {
            color: #777;
        }

        .pagecenter {
            text-align: center;
        }
    </style>
</head>
<body ng-controller="mainCtrl">
    <grid></grid>
    <table-pager-new></table-pager-new>

    <script type="text/javascript">
        angular.module("app").controller("mainCtrl", function ($location, $scope) {

            $scope.loading = true;
            //$scope.Pager = { PageIndex: 0, PageSize: 5 };
            //$scope.Pager.PageCount = 5; //页数
            //$scope.Pager.Range = APP.Range(5);
            //$scope.Pager.Data = testJson.records;
            //$scope.Pager.DataCount = testJson.records.length; // 总条数

            //$scope.displayed = testJson.records;
            //$scope.cols = testJson.cols;

            var cols = [
                  {
                      "header": "性",
                      "dataIndex": "firstName"
                  },
                  {
                      "header": "名",
                      "dataIndex": "lastName"
                  },
                  {
                      "header": "生日",
                      "dataIndex": "birthDate"
                  },
                  {
                      "header": "性别",
                      "dataIndex": "balance"
                  },
                  {
                      "header": "邮箱",
                      "dataIndex": "email"
                  }
                  ,
                  {
                      "header": "扩展字段",
                      "dataIndex": "new"
                  },
                    {
                        "header": "性1",
                        "dataIndex": "firstName1"
                    },
                  {
                      "header": "名1",
                      "dataIndex": "lastName1"
                  },
                  {
                      "header": "生日1",
                      "dataIndex": "birthDate1"
                  },
                  {
                      "header": "性别1",
                      "dataIndex": "balance1"
                  },
                  {
                      "header": "邮箱1",
                      "dataIndex": "email1"
                  },
                  {
                      "header": "扩展字段1",
                      "dataIndex": "new11"
                  }
            ]

            var displayed = [];
            for (var i = 0; i < 6000; i++) {
                var col1 = {
                    "firstName": "Laurent0" + i,
                    "lastName": "Renard" + i,
                    "birthDate": "1987-05-21" + i,
                    "balance": 102 + i,
                    "email": "whatever@gmail.com" + i,
                    "firstName1": "Laurent0" + i,
                    "lastName1": "Renard",
                    "birthDate1": "1987-05-21" + i,
                    "balance1": 102 + i,
                    "email1": "whatever@gmail.com" + i
                };
                displayed.push(col1);
            }
            $scope.cols = cols;
            $scope.displayed = displayed;

            $scope.loading = false;


        });
    </script>

</body>
</html>
